<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html {
				height: 100%;
			}

			body {
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
			}

			#test {
				width: 100px;
				height: 100px;
				background: pink;
				text-align: center;
				font: 30px/100px "微软雅黑";

				/*display: block;*/

				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;

				transition-property: width;
				transition-duration: 2s;
				transition-timing-function: linear;
				/* transition-delay: 3s; */
			}
		</style>
	</head>
	<body>
		<div id="test"></div>
		<script type="text/javascript">
			// 元素首次渲染还没有结束之前,不会触发transition
			// 也就是所欲的元素都画到浏览器之前,不会发生过渡.
			// 那么下面这两句,仅仅是解析.到了alert(1),这是阻塞.确定之后才会触发过渡.
			// alert(1);
			// var test = document.querySelector("#test");
			// test.style.width = "300px";

			/*
			如果是window.onload，那么表示页面已经渲染完成，再触发onload。
			*/
			// window.onload = function() {
			// 	var test = document.querySelector("#test");
			// 	test.style.width = "300px";
			// }

			/*
			同时注意下面这种写法
			*/
			window.onload = function() {
				var test = document.createElement("div");
				test.id = "test";
				document.documentElement.appendChild(test);
				// 没有渲染完成,不会有过渡
				// test.style.width = "300px";
				
				// 这里是等待渲染完成后2s,会有过渡.
				setTimeout(function() {
					test.style.width = "300px";
				}, 2000)
			}
		</script>
	</body>
</html>
